<template>
	<view>
			<uni-list>
				<uni-list-item class="item">
					<template v-slot:body>
						<view class="item">
							<text>头像</text>
							<cloud-image @click="uploadAvatarImg" v-if="userInfo.avatar" :src="userInfo.avatar" width="50px" height="50px"></cloud-image>
							<uni-icons @click="uploadAvatarImg" v-else class="chooseAvatar" type="plusempty" size="30" color="#dddddd"></uni-icons>
						</view>
					</template>
				</uni-list-item>
				<uni-list-item class="itemreadOnly" title="账户" :rightText="userDetail.userName" >
				</uni-list-item>
				<uni-list-item class="item" @click="setrealName('')" title="姓名"  :rightText="userDetail.realName||'未设置'"  link>
				</uni-list-item>
				<uni-list-item class="item" @click="setTel('')"title="手机号" :rightText="userDetail.tel||'未设置'" link>
				</uni-list-item>
				<uni-list-item class="item" @click="setEmail('')" title="邮箱" :rightText="userDetail.email||'未设置'" link>
				</uni-list-item>
				<uni-list-item class="itemreadOnly" @click="" title="所属部门" :rightText="userDetail.orgName" >
				</uni-list-item>
			</uni-list>
			<uni-popup ref="realNameDialog" type="dialog">
				<uni-popup-dialog mode="input" :value="userDetail.realName" @confirm="setrealName" title="姓名"
					placeholder="请输入姓名">
				</uni-popup-dialog>
			</uni-popup>
			<uni-popup ref="telDialog" type="dialog">
				<uni-popup-dialog mode="input" :value="userDetail.tel" @confirm="setTel" title="手机号"
					placeholder="请输入手机号">
				</uni-popup-dialog>
			</uni-popup>
			<uni-popup ref="emailDialog" type="dialog">
				<uni-popup-dialog mode="input" :value="userDetail.email" @confirm="setEmail" title="邮箱"
					placeholder="请输入邮箱">
				</uni-popup-dialog>
			</uni-popup>
	</view>
</template>
<script>
	import {
		mapMutations,
		mapGetters
	} from 'vuex';
	import base from '@/config/baseUrl';
	
	export default {
		data() {
			return {
				userDetail : {
					orgName:"",
					roleName:"",
					tel:"",
					email:"",
					realName:""
				}
			}
		},
		onLoad() {
			this.$http.get('/system/user/profile').then(res => {
				this.userDetail.userName = res.data.userName;
				this.userDetail.realName = res.data.realName;
				this.userDetail.tel = res.data.tel;
				this.userDetail.email = res.data.email;
				this.userDetail.orgName = res.data.sysOrg.orgName;
				this.userDetail.roleName = res.data.sysRole.roleName;
			});
		},
		computed: {
			...mapGetters({
				userInfo: 'userInfo',
				login: 'hasLogin'
			})
		},
		methods: {
			...mapMutations({
				setUserInfo: 'setUserInfo'
			}),
			setrealName(realName) {
				if (realName) {
					this.userDetail.realName = realName;
					this.updateUserDetail();
					this.$refs.realNameDialog.close()
				} else {
					this.$refs.realNameDialog.open()
				}
			},
			setTel(tel) {
				if (tel) {
					this.userDetail.tel = tel;
					this.updateUserDetail();
					this.$refs.telDialog.close()
				} else {
					this.$refs.telDialog.open()
				}
			},
			setEmail(email) {
				if (email) {
					this.userDetail.email = email;
					this.updateUserDetail();
					this.$refs.emailDialog.close()
				} else {
					this.$refs.emailDialog.open()
				}
			},
			updateUserDetail(){
				let httpData = {
					userId : this.userInfo.userId,
					realName : this.userDetail.realName,
					tel : this.userDetail.tel,
					email : this.userDetail.email
				};
				this.$http.post('/system/user/update',httpData).then(res => {
					this.setUserInfo(httpData)
					uni.showToast({
						title:"更新成功",
						icon: 'none'
					});
				});
			},
			uploadAvatarImg(res) {
				const crop = {
					quality: 100,
					width: 600,
					height: 600,
					resize: true
				};
				uni.chooseImage({
					count: 1,
					crop,
					success: async (res) => {
						console.log(res);
						let tempFile = res.tempFiles[0],
							avatar_file = {
								// #ifdef H5
								extname: tempFile.name.split('.')[tempFile.name.split('.').length - 1],
								// #endif
								// #ifndef H5
								extname: tempFile.path.split('.')[tempFile.path.split('.').length - 1]
								// #endif
							},
							filePath = res.tempFilePaths[0]
						// #ifndef APP-PLUS
						//非app端用前端组件剪裁头像，app端用内置的原生裁剪
						filePath = await new Promise((callback) => {
							uni.navigateTo({
								url: '/pages/ucenter/user/cropImage?path=' + filePath +
									`&options=${JSON.stringify(crop)}`,
								animationType: "fade-in",
								events: {
									success: url => {
										callback(url)
									}
								}
							});
						})
						// #endif
						uni.showLoading({
							title:"正在上传",
							mask: true
						});
						uni.uploadFile({
						    url: base.baseUrl +'/system/user/uploadAvatar',
							header: {
								'token': this.userInfo.token 
							},
						    filePath: filePath,
						    name: 'avatarfile',
						    success: (uploadFileRes) => {
								let json = JSON.parse(uploadFileRes.data)
								avatar_file = base.baseUrl+"/"+json.data;
								uni.hideLoading()
								this.setUserInfo({
									avatar:avatar_file,
								});
						    }
						});
					}
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	/* #ifndef APP-NVUE */
	view {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
	}
	/* #endif */
	.item {
		width: 750rpx;
		height: 120rpx;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.itemreadOnly {
		width: 750rpx;
		height: 120rpx;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding-right: 40rpx;
	}
	
	.chooseAvatar {
		border: dotted 1px #ddd;
		border-radius: 10px;
		text-align: center;
		width: 50px;
		height: 50px;
		line-height: 50px;
	}
</style>

